<template>
	<view v-if="order_info" class="px-2 wrapper">
		<!--//跑腿 订单状态(0订单待支付/1待骑手接单/2骑手已接单/3骑手跑腿中/4跑腿已完成/100订单已取消)-->
		<u-navbar title="跑腿订单详情" @rightClick="rightClick" :autoBack="true">
		</u-navbar>
		<view class="head flex-row flex-y-center" :style="{paddingTop: top + 'px'}">
			<view class="head1">{{ order_info.order_status_text }}</view>
		</view>
		<view>
			<view v-if="order_info.order_status==100" class="p-2 my-4 rounded-xl bg-white item">
				<!--已经取消-->
				<!-- <view class="my-1 text-xl">{{ order_info.order_status_text }}</view> -->
				<image style="width: 44rpx;height: 44rpx;margin: 10rpx auto;display: flex;" src="../../../static/ymq_canyino2o/dengdai.png" mode=""></image>
				<view class="my-1 text-gray-700">此订单已取消</view>
				<!--<view class="my-1 text-gray-400">提交订单15分钟未支付,系统已自动取消订单</view>-->
			</view>

			<view v-if="order_info.order_status==0" class="p-2 my-4 rounded-xl bg-white item">
				<!-- <view class="my-1 text-xl">{{ order_info.order_status_text }}</view> -->
				<image style="width: 44rpx;height: 44rpx;margin: 10rpx auto;display: flex;" src="../../../static/ymq_canyino2o/dengdai.png" mode=""></image>
				<view class="my-1 text-gray-700">
					<view class="flex flex-col justify-between items-center">
						<view class="flex-1">订单已提交成功,暂未支付</view>
						<view @click="show_pay_box_event" class="daya-btn w-1/3">立即支付</view>
					</view>
				</view>

				<view class="my-1 text-gray-700">
					<view @click.stop="cancel_order(order_info.id,0)" class="daya-btn" style="background: #469BF6;">
						我要取消订单
					</view>
				</view>

			</view>

			<view v-if="order_info.order_status==1" class="p-2 my-4 rounded-xl bg-white item">
				<!-- <view class="my-1 text-xl">{{ order_info.order_status_text }}</view> -->
				<image style="width: 44rpx;height: 44rpx;margin: 10rpx auto;display: flex;" src="../../../static/ymq_canyino2o/dengdai.png" mode=""></image>
				<view class="my-1 text-gray-700">
					<view class="flex flex-col justify-between items-center">
						<view class="flex-1">订单已支付,等待骑手接单</view>
					</view>
				</view>

				<view class="my-1 text-gray-700">
					<view @click.stop="cancel_order(order_info.id,1)" class="daya-btn" style="background: #469BF6;">
						我要取消订单
					</view>
					<view class="my-1 flex justify-start items-center">
						<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/warning.png"
							class="w-4 h-4 " style="margin-right: 8rpx;"></image>
						暂无骑手接单,可直接取消订单,金额退回到余额!
					</view>
				</view>

			</view>

			<view v-if="order_info.order_status==2 || order_info.order_status==3" class="p-2 my-4 rounded-xl bg-white item">
				<!--已接单-->
				<!-- <view class="my-1 text-xl">{{ order_info.order_status_text }}</view> -->
				<image style="width: 44rpx;height: 44rpx;margin: 10rpx auto;display: flex;" src="../../../static/ymq_canyino2o/dengdai.png" mode=""></image>
				<view class="my-1 text-gray-700">
					<view class="px-2">

						<view class="py-2">骑手: {{ order_info.rider_name || '-无骑手姓名-' }}</view>


						<!-- #ifdef APP || MP-WEIXIN || H5 -->
						<view class="py-2 flex justify-start items-center" @click.stop="daya_to_chat(order_info.id, 95,'runner' )">
							<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/tochat.png"
								class="w-6 h-6 mr-2"></image>
							<view>和当前骑手发起在线聊天</view>
						</view>
						<!-- #endif -->

						<view class="py-2 flex justify-start items-center" @click.stop="call_tel(order_info.rider_tel)">
							<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/tocall.png"
								class="w-6 h-6 mr-2"></image>
							<view>电话: {{ order_info.rider_tel || '-无骑手电话-' }} 点击拨打</view>
						</view>

						<view class="py-2">接单时间: {{ order_info.rider_resp_time || '-未记录到此时间-' }}</view>
					</view>
				</view>



				<view class="my-1 text-gray-700">
					<view @click.stop="cancel_order(order_info.id,2)" class="daya-btn bg-gray-600" style="background: #469BF6;">
						我要取消订单(请联系平台)
					</view>
					<view class="my-1 flex justify-start items-center">
						<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/warning.png"
							class="w-4 h-4 mr-0.5" style="margin-right: 8rpx;"></image>
						订单已被骑手接单,如需要取消,请联系平台客服协调!
					</view>
				</view>

			</view>

			<view v-if="order_info.order_status==4" class="p-2 my-4 rounded-xl bg-white item">
				<!--订单已完成-->
				<!-- <view class="my-1 text-xl">{{ order_info.order_status_text }}</view> -->
				<image style="width: 44rpx;height: 44rpx;" src="../../../static/ymq_canyino2o/dengdai.png" mode=""></image>
				<view class="my-1 text-gray-700">
					<view class="px-2">

						<view class="py-2">骑手: {{ order_info.rider_name || '-无骑手姓名-' }}</view>

						<!-- #ifdef APP || MP-WEIXIN || H5 -->
						<view class="py-2 flex justify-start items-center" @click.stop="daya_to_chat(order_info.id, 95,'runner' )">
							<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/tochat.png"
								class="w-6 h-6 mr-2"></image>
							<view>和当前骑手发起在线聊天</view>
						</view>
						<!-- #endif -->

						<view class="py-2 flex justify-start items-center" @click.stop="call_tel(order_info.rider_tel)">
							<image src="https://ymqycc.oss-cn-chengdu.aliyuncs.com/ymqzho2o/static/ymq_canyino2o/tocall.png"
								class="w-6 h-6 mr-2"></image>
							<view>电话: {{ order_info.rider_tel || '-无骑手电话-' }} 点击拨打</view>
						</view>


						<view class="py-2">下单时间: {{ order_info.created_time || '-未记录到此时间-' }}</view>
						<view class="py-2">接单时间: {{ order_info.rider_resp_time || '-未记录到此时间-' }}</view>
						<view class="py-2">完成时间: {{ order_info.finished_time || '-未记录到此时间-' }}</view>
					</view>
				</view>
			</view>



			<view class="p-2 my-4 rounded-xl bg-white item">
				<view class="my-1 text-base" style="color: #030303;font-size: 26rpx;">费用信息</view>
				<view style="font-size: 24rpx;color: #030303;">
					<view class="flex justify-between items-center">
						<view>跑腿费</view>
						<view>￥{{ order_info.delivery_fee || 0 }}</view>
					</view>
					<view class="flex justify-between items-center">
						<view>给骑手的小费</view>
						<view>￥{{ order_info.tip_fee || 0 }}</view>
					</view>
					<view class="flex justify-between items-center">
						<view>代购预付费(经平台)</view>
						<view>￥{{ order_info.purchase_fee || 0 }}</view>
					</view>
					<view class="flex justify-between items-center">
						<view>骑手垫付(不经平台)</view>
						<view>￥{{ order_info.purchase_real_fee || 0 }}</view>
					</view>
					<view class="flex justify-between items-center">
						<view></view>
						<view>
							<text>合计</text>
							<text style="font-size: 28rpx;">￥{{ order_info.pay_fee || 0 }}</text>
						</view>
					</view>
				</view>
			</view>


			<view class="p-2 my-4 rounded-xl bg-white item">
				<view class="my-1 text-base" style="color: #030303;font-size: 26rpx;">订单详情信息</view>
				<view style="font-size: 24rpx;color: #030303;">
					<view class="flex justify-start items-start mt-2">
						<view class="mr-4">
							<view style="background: #469BF6;" class="rounded-full w-5 h-5 bg-black text-white flex justify-center">
								<text class="text-xs">取</text>
							</view>
						</view>
						<view class="overflow-hidden flex-1 ">
							<view class="break-all text-gray-700 text-sm">
								<text
									style="display: block;">{{ order_info.pickup_province }}{{ order_info.pickup_city }}{{ order_info.pickup_district }}{{ order_info.pickup_address }}</text>
								<text style="display: block;">{{ order_info.pickup_name }} {{ order_info.pickup_tel }}</text>
							</view>
							<view class="text-gray-400" style="color: #9F9696;">
								预定取货时间: {{ order_info.pickup_time }}
							</view>
						</view>
					</view>

					<view class="flex justify-start items-start mt-2">
						<view class="mr-4">
							<view style="background: #EC9D1F;"
								class="rounded-full w-5 h-5 bg-yellow-400 text-white flex justify-center">
								<text class="text-xs">送</text>
							</view>
						</view>
						<view class="overflow-hidden flex-1 ">
							<view class="break-all text-gray-700 text-sm">
								<text
									style="display: block;">{{ order_info.arrival_province }}{{ order_info.arrival_city }}{{ order_info.arrival_district }}{{ order_info.arrival_address }}</text>
								<text style="display: block;">{{ order_info.arrival_name }} {{ order_info.arrival_tel }}</text>

							</view>
							<view class="text-gray-400" style="color: #9F9696;">
								预定送货时间: {{ order_info.arrival_time }}
							</view>
						</view>
					</view>



					<view class="flex justify-start items-start mt-2">
						<view class="mr-4 text-sm">
							需求:
						</view>
						<view class="overflow-hidden flex-1  break-all text-sm">
							{{ order_info.demand || '-无需求信息-' }}
						</view>
					</view>

					<view class="flex justify-start items-start mt-2">
						<view class="mr-4 text-sm">
							备注:
						</view>
						<view class="overflow-hidden flex-1  break-all text-sm">
							{{ order_info.remarks || '-无备注信息-' }}
						</view>
					</view>
				</view>
			</view>

		</view>



		<daya-pay v-if="order_info.order_status==0 && show_pay_box" :type="95" :order_id="runner_order_id"
			:mp_openid="wx_openid" :show_pay_box="show_pay_box" :kqyue="kqyue" jf_proportion="" :totalPrice="order_info.money"
			:user_wallet="userInfo.wallet" :hdfk="false" @close_pay_box="show_pay_box=false" @pay_success="pay_success"
			@pay_error="pay_error"></daya-pay>



	</view>
</template>

<script>
	import util from "@/ymq_canyino2o/utils/util";

	var app = getApp();
	export default {
		components: {},
		data() {
			return {

				runner_order_id: 0, //跑腿订单id
				show_pay_box: false,
				kqyue: false,
				userInfo_wallet: false,
				wx_openid: '',
				userInfo: {
					wallet: '0'
				},

				//==================

				order_id: 0,
				order_info: null,
				top: 0
			};
		},
		mounted() {
			this.load_pay_box_data();
		},
		onLoad(options) {
			this.order_id = options.order_id;
			this.runner_order_id = options.order_id;
			this.load_order_info();
		},
		onShow() {
			this.top = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		methods: {
			rightClick() {
				uni.navigateBack(-1)
			},
			show_pay_box_event(order_id) {
				//使用后端接口查询当前订单,是否能支持余额支付
				var user_id = uni.getStorageSync('users').id
				app.globalData.util.request({
					url: 'entry/wxapp/pay_is_support_amount',
					cachetime: '0',
					data: {
						user_id: user_id,
						type: 95,
						order_id: order_id
					},
					success: (res) => {
						console.log("res", res.data.data)
						this.kqyue = res.data.data.is_yuepay
						this.userInfo_wallet = res.data.data.wallet
						this.userInfo.wallet = res.data.data.wallet

						this.show_pay_box = true; //显示支付盒子
					}
				})
			},
			cancel_order(order_id, order_status) {
				//order_status=0=未支付 1已支付未接单 2已接单 3跑腿中
				if (order_status == 0) {
					this.cancel_order_run(order_id);
				}

				if (order_status == 1) {
					//弹出提示框,是否取消订单
					uni.showModal({
						title: '提示',
						content: '确定取消订单?',
						success: (res) => {
							if (res.confirm) {
								this.cancel_order_run(order_id);
							}
						}
					})
				}

				if (order_status >= 2) {
					//弹出提示框,是否取消订单
					uni.showModal({
						title: '提示',
						content: '本订单已有骑手接单,请联系平台方取消订单!',
						// confirmText: '联系平台',
						confirmText: '好的',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								// uni.makePhoneCall({
								//   phoneNumber: app.globalData.setting.platform_tel
								// })
							}
						}
					})
				}

			},
			cancel_order_run(order_id) {
				app.globalData.util.request({
					url: 'entry/wxapp/runner_order_cancel',
					data: {
						order_id: order_id,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.showToast({
								title: '取消成功',
								icon: 'none',
								duration: 2000
							});
							this.load_order_info();
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							})
						}
					}
				});
			},
			daya_to_chat(order_id, order_type, user_type) { //user_type = 'runner', 'store', 'user'
				app.globalData.util.request({
					url: 'entry/wxapp/get_uni_app_uni_id',
					data: {
						order_id: order_id,
						user_type: user_type,
						order_type: order_type,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.navigateTo({
								url: '/ymq_canyino2o/pages/dyIm/chat/chat?user_id=' + res.data.data
							});
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							})
						}
					}
				});
			},
			daya_to_call(order_id, order_type, user_type) { //user_type = 'runner', 'store', 'user'
				app.globalData.util.request({
					url: 'entry/wxapp/get_uni_app_uni_id',
					data: {
						order_id: order_id,
						user_type: user_type,
						order_type: order_type,
					},
					success: (res) => {
						if (res.data.code == 1) {
							uni.makePhoneCall({
								phoneNumber: res.data.data
							})
						} else {
							uni.showModal({
								title: '提示',
								content: res.data.msg,
								showCancel: false
							})
						}
					}
				});
			},
			call_tel(tel) {
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			load_pay_box_data() {
				this.kqyue = getApp().globalData.xtxx.is_yuepay == '1'


				var h = uni.getStorageSync('users').id
				app.globalData.util.request({
					url: 'entry/wxapp/UserInfo',
					cachetime: '0',
					data: {
						user_id: h
					},
					success: (t) => {
						var a = util.formatTime(new Date()).substring(0, 10).replace(/\//g, '-')
						if ('' != t.data.dq_time && t.data.dq_time >= a.toString()) {
							t.data.ishy = 1
						}
						this.userInfo = t.data
					}
				})

			},
			pay_success() {
				//重新加载本页面
				this.load_order_info();
			},
			pay_error() {},
			load_order_info() {
				app.globalData.util.request({
					url: 'entry/wxapp/runner_order_info',
					cachetime: '0',
					data: {
						id: this.order_id
					},
					success: (res) => {
						if (res.data.code == 0) {
							app.globalData.util.message(res.data.msg, '', 'error');
							return false;
						}
						this.order_info = res.data.data;
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-status-bar,
	::v-deep .u-navbar__content {
		background-color: transparent !important;
	}

	::v-deep .u-navbar__content__title,
	::v-deep .u-icon text {
		color: #fff !important;
	}

	.head .head1 {
		/* height: 200rpx; */
		font-size: 32rpx;
		color: #fff;
		text-align: left;
		padding: 0 2.5%;
		box-sizing: border-box;
	}

	.wrapper {
		min-height: 100vh;
		background: linear-gradient(180deg, #01B6FB, #07B4F6, #E9EEF6, #E8EAF0);

		.item {
			margin-top: 20rpx;
			border-radius: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			.items-center {
				margin-top: 20rpx;
			}
		}
	}
</style>